<script setup>
import { ref } from 'vue'
import MainStory from '../components/stage/MainStory.vue'
import Resources from '../components/stage/Resources.vue'
import miao from '../components/stage/miao.vue'
import SiteNotice from '../components/SiteNotice.vue'

const stageType = ref(1)
</script>

<template>
    <article>
        <SiteNotice />
        <nav>
            <input id="main-story" type="radio" v-model="stageType" value="1">
            <label for="main-story">剧情战役</label><!--
            <input id="resources" type="radio" v-model="stageType" value="2">
            <label for="resources">模拟作战</label>-->
            <input id="miao" type="radio" v-model="stageType" value="4">
            <label for="miao">补给作战</label><!--
            <input id="branch-story" type="radio" v-model="stageType" value="5">
            <label for="branch-story">往期活动</label>-->
        </nav>
        <MainStory v-if="stageType == 1" />
        <Resources v-else-if="stageType == 2" />
        <miao v-else-if="stageType == 4" />
        <p v-else>往期活动</p>
    </article>
</template>

<style scoped>
label {
    margin: 0 0.5em 0 0.25em;
}
</style>